// 商品分类
<template>
  <div>
    <Row class="page">
      <Col span="24">
      <Button type="primary" icon="plus-round" @click="modal1 = true">添加用户</Button>
      <Modal v-model="modal1" title="添加分类" @on-ok="ok" @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :label-width="100">
          <FormItem label="用户名" prop="name">
            <Input v-model="formValidate.workName" type="email" placeholder="分类名称"></Input>
          </FormItem>
          <FormItem label="密码" prop="name">
            <Input v-model="formValidate.workName" placeholder="分类介绍"></Input>
          </FormItem>
          <FormItem label="是否启用" prop="mail">
            <i-Switch v-model="switch1" @on-change="change"></i-Switch>
          </FormItem>
          <FormItem label="选择权限" prop="mail">
    <Select v-model="model1" style="width:200px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
          </FormItem>
        </Form>
      </Modal>
      </Col>
    </Row>
    <br>
    <Row class="page">
      <Col span="24">
      <Table border :columns="columns7" :data="data6"></Table>
      </Col>
    </Row>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      cityList:[
            {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    }
      ],
      plist:[
        {'name':'管理权限','id':1},
          {'name':'管理权限','id':1},
            {'name':'管理权限','id':1}
      ],
      switch1: false,
      switch2: false,
      list: [{ name: "1" }, { name: "2" }],
      index: 1,
      formDynamic: {
        items: [
          {
            name: "",
            number: 0,
            name: "",
            number: "",
            price: "",
            group_price: "",
            index: 1,
            status: 1
          }
        ]
      },
      formValidate: {
        workName: "",
        workInfo: "",
        workClass: [],
        thumbnail: "",
        DisplayImg: [],
        detailsImg: ""
      },
      modal1: false,
      columns7: [
        {
          title: "ID",
          key: "id",
          width: 100
        },
        {
          title: "用户名称",
          key: "workName",
          render: (h, params) => {
            return h("div", [h("strong", params.row.name)]);
          }
        },
        {
          title: "用户权限",
          key: "spsl"
        },
        {
          title: "当前状态",
          key: "number"
        },

        {
          title: "操作",
          key: "caozuo",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              ),
              h(
                "Button",
                {
                  style: {
                    marginLeft: "10px"
                  },
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      console.log("s");
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          id: 1,
          name: "John Brown",
          spsl: 18,
          number: 22
        }
      ],
      value: ""
    };
  },
  methods: {
    handleAdd() {
      this.index++;
      this.formDynamic.items.push({
        value: "",
        index: this.index,
        status: 1
      });
    },
    change(e) {
      this.$Message.info("", e);
    },
    change1(e) {
      this.$Message.info("", e);
    },
    ok() {
      console.log(this.formValidate, this.formDynamic, this.list);
      //   this.$Message.info("Clicked ok");
      //   this.data6.push({ name: this.value, spsl: "0" });
    },
    cancel() {
      this.$Message.info("Clicked cancel");
    },
    remove(index) {
      this.data6.splice(index, 1);
    },
    handleSubmit(name) {
      console.log(name);
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>

<style scoped>
</style>
